<!-- 法规标准 -->
<template>
	<div class="lawsRegulation" v-loading="technicalLoading">
		<div class="title">法规标准</div>
    <div class="searchBox">
      <el-form ref="form" :model="searchForm" size="mini" inline>
        <el-form-item label="">
          <el-input v-model="searchForm.search" placeholder="请输入你要搜索的关键字" suffix-icon="el-icon-search"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="greenBtn" size="mini" @click="onSubmit({pageSize: pageSize, pageNum: 1})">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="dataListBox" style="overflow: auto">
       <el-table
        :data="lawsRegulation.data"
        border
        style="width: 80%">
        <el-table-column
          prop="name"        
          label="文档">
          <template slot-scope="scope">
            <el-button type="text" @click="openFile(scope.row.path)">{{scope.row.name}}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="gmtCreate"        
          label="时间">
        </el-table-column>
      </el-table>
    </div>

    <myPaging :func="pageUpdate" :total="lawsRegulation.total"></myPaging>
	</div>
</template>
<script>
import { mapActions, mapGetters} from "vuex"
import myPaging from '@/components/myPaging.vue'
export default {
  name: 'lawsRegulation',
  data () {
    return {
      msg: 'hello lawsRegulation!',
      technicalLoading: false,
      searchForm: {
        search: '',
      },
      dataList: [
        {
          link: '《水污染源在线检测系统安装技术规范》',
          time: '2019-07-06 14:00'
        },
        {
          link: '《水污染源在线检测系统安装技术规范》',
          time: '2019-07-06 14:00'
        },
        {
          link: '《水污染源在线检测系统安装技术规范》',
          time: '2019-07-06 14:00'
        },
      ]
		}
  },
	methods: {
    ...mapActions([
      'fetchLawsRegulaList'
    ]),
    async onSubmit(pageOption = {pageSize: this.pageSize, pageNum: 1}) {
      this.technicalLoading = true

      await this.fetchLawsRegulaList({...this.searchForm, ...pageOption})

      this.technicalLoading = false
    },
    pageUpdate(option) {
      this.onSubmit(option)
    },
    openFile(path) {
      window.open('http://47.112.16.168:' + path)
    }
  },
  created() {
    this.onSubmit()
  },
  computed: {
    ...mapGetters({
      lawsRegulation: 'getLawsRegulation',
      //分页依赖
      pageSize: 'getPageSize',
    })
  },
  components: {
    myPaging
  }
}
</script>
<style scoped>
.lawsRegulation {
  background: #fff;
  padding: 0 20px 0 20px;
  min-height: 100%;
}
.lawsRegulation .title {
  position: relative;
  left: 15px;
  line-height: 70px;
  font-size: 16px;
}
.lawsRegulation .title::before {
  content: '';
  position: absolute;
  left: -15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}
.searchBox {
  background: #fff;
  margin-bottom: 30px;
  border-bottom: 1px dashed #dcdce0;
  padding-bottom: 15px;
}
.searchBox .line {
  text-align: center;
}
.dataListBox .dataItem {
  font-size: 16px;
  line-height: 44px;
  color: #303030;
  text-decoration: underline;
}
.dataListBox .dataItem .name {
  margin-right: 10%;
  width: 60%;
}
</style>
